<template>
<pullRefresh @refresh="toRefresh">
	<div id="center">
		<!-- 个人信息块 -->
		<div class="userinfo">
			<div class="info">
				<img class="avatar" src="@/assets/img/avatar.png" >
				<span class="username">{{userinfo.username}}</span>
			</div>
			<div class="resetpass" @tap="resetpass"><span class="mui-icon mui-icon-compose"></span>修改密码</div>
			<div id="grade">
				<span class="span1">{{curGrade}}</span>
				<div id="gradeProgress" class="mui-progressbar">
					<span></span>
				</div>
				<span class="span2">{{nextGrade}}</span>
				<p>距离升级还需要{{distance}}流水</p>
			</div>
		</div>
		<!-- 钱包金额 -->
		<div class="wallet">
			<div class="item" @tap="$router.push({path:'/walletTransfer'})">
				<span class="iconfont iconqianbao" style="background:#47c4ff;"></span>
				<div class="txt">
					<h5>充值钱包</h5>
					<h4>￥{{userinfo.centerMoney}}</h4>
				</div>
			</div>
			<div class="item" @tap="$router.push({path:'/walletTransfer'})">
				<span class="iconfont iconjinbi" style="background:#ffc107;"></span>
				<div class="txt">
					<h5>消费钱包</h5>
					<h4>￥{{userinfo.betMoney}}</h4>
				</div>
			</div>
			<div class="item" @tap="$router.push({path:'/walletTransfer'})">
				<span class="iconfont iconzhuanzhang" style="background:#ff88bf;"></span>
				<div class="txt">
					<h5>盈利钱包</h5>
					<h4>￥{{userinfo.profitMoney}}</h4>
				</div>
			</div>
			<div class="item">
				<span class="iconfont iconedu" style="background:#9c27b0;"></span>
				<div class="txt">
					<h5>流水钱包</h5>
					<h4>￥{{userinfo.incomeMoney}}</h4>
				</div>
			</div>
		</div>
		<!-- 桌面菜单 -->
		<div id="desktop-menu">
			<div class="item">
				<a @tap="$router.push({path:'/addMoney'})" style="background:#6641E2;">
					<span class="iconfont iconchongzhi"></span>
				</a>
				<span>充值</span>
			</div>
			<div class="item">
				<a @tap="$router.push({path:'/withdraw'})" style="background:#EC971F;">
					<span class="iconfont icontikuanjilu"></span>
				</a>
				<span>提现</span>
			</div>
			<div @tap="showCustomer=true" class="item">
				<a style="background:#2AC845;">
					<span class="iconfont iconkefu"></span>
				</a>
				<span>客服</span>
			</div>
			<div class="item">
				<a @tap="$router.push({path:'/notice'})" style="background:#DD524D;">
					<span class="iconfont icongonggao1"></span>
				</a>
				<span>公告</span>
			</div>
			<div class="item">
				<a @tap="$router.push({path:'/repeatedBet',query:{money:userinfo.repeatedBet}})" style="background:rgb(156, 39, 176);">
					<span class="iconfont iconcaipiao1"></span>
				</a>
				<span>复投</span>
			</div>
		</div>
		<!-- 导航列表 -->
		<ul class="mui-table-view">
			<li class="mui-table-view-cell"><a @tap="$router.push({path:'/ticketRecord'})" class="mui-navigate-right">投注记录</a></li>
			<li class="mui-table-view-cell"><a @tap="$router.push({path:'/addMoneyRecord'})" class="mui-navigate-right">充值记录</a></li>
			<li class="mui-table-view-cell"><a @tap="$router.push({path:'/withdrawRecord'})" class="mui-navigate-right">提现记录</a></li>
			<li class="mui-table-view-cell"><a @tap="$router.push({path:'/moneyRecord'})" class="mui-navigate-right">账变记录</a></li>
			<li class="mui-table-view-cell"><a @tap="$router.push({path:'/team',query:{money:userinfo.businessMoney,per:userinfo.businessPer}})" class="mui-navigate-right">我的团队</a></li>
			<li class="mui-table-view-cell"><a @tap="$router.push({path:'/bankList'})" class="mui-navigate-right">银行卡号</a></li>
			<li v-if="userinfo.settlement==2" class="mui-table-view-cell"><a @tap="$router.push({path:'/daySettle',query:{secondTeamPer:userinfo.secondTeamPer}})" class="mui-navigate-right">当日结算</a></li>
		</ul>
		<div class="exit" @tap="exit">退出登陆</div>
		<!-- 客服二维码 -->
		<div v-show="showCustomer" @tap="showCustomer=false" id="cusQrcode">
			<div>
				<img :src="kefu1">
				<p>客服QQ扫码</p>
			</div>
			<div v-if="kefu2">
				<img :src="kefu2">
				<p>客服QQ扫码</p>
			</div>
		</div>
	</div>
</pullRefresh>
</template>

<script>
import pullRefresh from "@/components/pullRefresh"
import {getCenter,updatePassword,allLevel,exit} from "@/api/my"
export default {
	name: 'center',
	components:{
		  pullRefresh
	},
	data(){
		return{
			userinfo:Object,
			showCustomer:false,
			curGrade:"",
			nextGrade:"",
			distance:""
		}
	},
	mounted(){
		this.mountedInit()
	},
	methods:{
		mountedInit(callback){
			mui.showLoading()
			//个人中心初始化请求
			getCenter().then(res1=>{
				this.userinfo = res1;
				return allLevel()
			}).then(res2=>{	//等级列表
				mui.hideLoading()
				let incomeMoney = this.userinfo.total
				for (let i = 0; i < res2.length; i++) {
					let item = res2[i]
					if(incomeMoney<item.totalSum){
						this.curGrade = res2[i-1].name
						this.nextGrade = item.name
						this.distance = item.totalSum - incomeMoney;	//距离
						let progress = (incomeMoney - res2[i-1].totalSum) / (item.totalSum - res2[i-1].totalSum) * 100
						//等级进度条
						mui("#gradeProgress").progressbar({progress}).show();
						callback && callback()
						return;
					}
				}
			})
		},
		resetpass(){	//修改密码
			mui.prompt('','请输入旧密码','修改密码',['取消','确认'],callback,'div')
			document.querySelector('.mui-popup-input input').type='password' 
			document.querySelector('.mui-popup-text').remove()
			document.querySelector('.mui-popup-input').innerHTML = '<input type="password" autofocus="" placeholder="请输入旧密码"><input type="password" placeholder="请输入新密码">'
			function callback(e){
				if(e.index==0) return;
				
				mui.showLoading("修改中..", "div");
				var passData = {
					oldPassword:mui('.mui-popup-input>input')[0].value,
					password:mui('.mui-popup-input>input')[1].value
				}
				
				//验证
				if(passData.oldPassword.trim()=='' || passData.password.trim()==''){
					mui.hideLoading()
					mui.alert("旧密码和新密码为必填项！")
					return;
				}
				
				//请求
				updatePassword(passData).then(res=>{
					mui.hideLoading()
					if(res==200){
						mui.toast("修改成功")
					}else if(res.message){
						mui.toast(res.message)
					}else{
						mui.toast("系统错误")
					}
				})
			}
		},
		exit(){
			exit().then(res=>{
				if(res.message){
					mui.toast(res.message)
				}else{
					mui.toast("退出成功")
					this.$router.replace("/login")
				}
			})
		},
		toRefresh(callback){
			//这里进行重新加载数据操作
			this.mountedInit(()=>{
				callback()
			})
		}
	}
}
</script>

<style scoped lang="scss">
#center{padding:0 20px 70px 20px;text-align: left;}
.mui-title{line-height:60px}
.userinfo{box-shadow:3px 3px 8px 2px #c46d53;border-radius:5px;padding:30px 30px 10px 30px;position:relative;margin-top:25px;background:#fff}
.info{position:absolute;top:-40px;z-index:11;display:flex;flex-direction:column;align-items:center}
.info>.avatar{border-radius:50%;border:2px solid #ff0;width:90px;height:90px}
.info>.username{line-height:2}
.resetpass{position:absolute;top:30px;right:0;background:#ff9934;color:#fff;font-size:14px;padding:4px 8px 4px 10px;border-top-left-radius:20px;border-bottom-left-radius:20px}
.resetpass .mui-icon{font-size:20px}
#grade{position:relative;width:calc(100% - 80px);margin:75px 40px 0 40px}
#grade>span{position:absolute;top:-5px;font-size:15px;color:#ff9934;height:20px;line-height:20px}
#grade>.span1{left:-40px}
#grade>.span2{right:-40px}
#grade>p{text-align:center;margin-top:10px}
.mui-progressbar{height:10px}
.mui-progressbar span{background:#ff9934}
.wallet{margin-top:20px;display:flex;flex-wrap:wrap;justify-content:space-between;position:relative}
.wallet .item{width:48.5%;margin:1.5% 0;padding:10px 0;box-shadow:3px 3px 8px 2px #c46d53;border-radius:5px;display:flex;align-items:center;justify-content:center;background:#fff}
.wallet .item>span.iconfont{width:30px;height:30px;border-radius:50%;line-height:30px;text-align:center;font-size:15px;margin-right:6px;color:#fff}
.wallet .item .txt h5{color:#000;padding-left:3px}
#desktop-menu{margin:6vw 4vw}
.mui-table-view{background-color: transparent}
.mui-table-view-cell:after,.mui-table-view:after,.mui-table-view:before{display:none}
.mui-table-view-cell{padding:15px 20px;background:#ff9934;margin-bottom:10px;border-radius:10px;box-shadow: 0 0 1px 1px #fff9;}
.mui-table-view-cell>a{color:#fff!important}
.mui-navigate-right:after,.mui-push-left:after,.mui-push-right:after{font-size:22px;color:#fff}
.exit{
	width: 100%;
	text-align: center;
	line-height: 50px;
	height: 50px;
	border: 1px solid #dc750e;
	border-radius: 10px;
	color: #dc750e;
	margin-bottom: 20px;
	margin-top: 15px;
}
</style>
